<template>
  <div class="Dialog" v-if="isWx ? isShow : props.show">
    <div
      class="Dialog_box"
      :style="{
        backgroundImage: `url(${props.imgUrl})`,
        height: px2rpx2px(props.height || '0px'),
        width: px2rpx2px(props.width || '0px'),
      }"
    >
      <template v-if="props.hasHotZone">
        <div
          class="hot-zone"
          v-for="(item, index) in props.hotZone"
          :key="index"
          :style="{
            width: px2rpx2px(item.width),
            height: px2rpx2px(item.height),
            top: px2rpx2px(item.top),
            left: px2rpx2px(item.left),
          }"
          @click.stop="onHotZoneClick(item)"
        ></div>
      </template>
      <div
        @click="onDialogClose"
        class="Dialog_close"
        :style="{
          backgroundImage: `url(${props.closeImgUrl})`,
        }"
      ></div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
// const defaultConfig = () => ({
//   show: false,
//   width: "300px",
//   height: "200px",
//   imgUrl: "",
//   hasHotZone: false,
//   hotZone: [],
// });

const propConfig = {
  name: {
    type: String,
    default: "CustomDialog",
  },
  show: {
    label: "展示",
    type: Boolean,
    default: true,
    editType: "el-switch",
  },
  imgUrl: {
    label: "弹窗图片地址",
    type: String,
    default:
      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202008%2F05%2F20200805160947_dgxae.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687892987&t=f4ba879cc67b9e402350b898a00729c0",
    editType: "el-input",
  },
  closeImgUrl: {
    label: "弹窗关闭图片地址",
    type: String,
    default: "",
    editType: "el-input",
  },
  hasHotZone: {
    label: "是否开启图片热区",
    type: Boolean,
    default: false,
  },
  hotZone: {
    label: "热区设置",
    editType: "hotZone",
    type: Array,
    default: [],
  },
  width: {
    label: "宽度",
    type: String,
    default: "100%",
    editType: "el-input",
  },
  height: {
    label: "高度",
    type: String,
    default: "400px",
    editType: "el-input",
  },
};
</script>

<script setup>
import { defineProps, defineEmits, ref, onMounted } from "vue";
import { px2rpx2px } from "../utils/index.js";

const props = defineProps(propConfig);
const emits = defineEmits(["onHotZoneClick", 'close', 'view']);

const isShow = ref(props.show);
const isWx = ref(false);

onMounted(() => {
  // #ifdef MP-WEIXIN
  emits('view')
  if (window !== undefined) return;
  if (uni?.getSystemInfoSync().uniPlatform === "mp-weixin") {
    isWx.value = true;
  }
  // #endif
});

const onHotZoneClick = ({ url, isCoupon, uniqueId }) => {
  emits("onHotZoneClick", {
    url,
    isCoupon,
    dialog: true,
    vid: props.imgUrl?.split('/').at(-1),
    uniqueId
  });
};

const onDialogClose = () => {
  const vid = props.imgUrl.split('/').at(-1)
  isWx ? (isShow.value = false) : (props.show = false)
  emits('close', { vid })
}
</script>

<style lang="scss" scoped>
.Dialog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.63);
  display: flex;
  justify-content: center;
  .Dialog_box {
    position: absolute;
    top: 14vh;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% 100%;
    :deep(canvas) {
      width: inherit;
      height: inherit;
    }
    .hot-zone {
      position: absolute;
    }

    .Dialog_close {
      position: absolute;
      bottom: -60px;
      width: 32px;
      height: 32px;
      left: 50%;

      transform: translate(-50%, -50%);
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 100% 100%;
    }
  }
}
</style>
